<template>
  <div>
    <a-card>
      <a-row>
        <a-col :span="24">
          <div class="table-container">
            <!-- 操作按钮区域 -->
            <div class="table-operator">
              <a-button @click="addMenu()" type="primary" icon="plus">新增</a-button>
              <a-button @click="editMenu(selectionRows[0])" type="primary" icon="edit" :disabled="disEdit">修改</a-button>
              <a-button @click="batchDel" type="danger" icon="delete" :disabled="disDelete">删除</a-button>
              <a-button @click="searchQuery" type="primary" icon="reload">刷新</a-button>
            </div>

            <!-- table区域-begin -->
            <div>
              <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :loading="loading" :expandRowByClick="true" :data-source="dataSource"
                       :rowKey="record=>record.id" :pagination="false" bordered :scroll="{x:'max-content'}">
                <template slot="type" slot-scope="text,record">
                  <span v-html="getType(record)"></span>
                </template>
                <span slot="icon" slot-scope="icon">
                  <a-icon :type="icon" v-if="icon"></a-icon>
                </span>
                <template slot="permission" slot-scope="permission">
                  <template v-if="permission&&permission.split(',').length>0">
                    <a-space>
                      <a-tag v-for="tag in permission.split(',')" :key="tag" color="blue">{{tag}}</a-tag>
                    </a-space>
                  </template>
                  <span v-else>&lt;/&gt;</span>
                </template>
                <template slot="components" slot-scope="text,record">
                  <template v-if="record.components">
                    <span v-if="Object.keys(record.components).length===1">{{record.components['default']}}</span>
                    <span
                      v-else>{{record.components[Object.keys(record.components)[0]]!=='layouts/RouteView'?record.components[Object.keys(record.components)[0]]:record.components[Object.keys(record.components)[1]]}}</span>
                  </template>
                  <span v-else>&lt;/&gt;</span>
                </template>
                <span slot="hidden" slot-scope="hidden">{{!hidden?'是':'否'}}</span>
                <template slot="action" slot-scope="text,record">
                  <ry-tooltip-button title="新增" type="primary" icon="plus" :disabled="record.type==='3'" @click="addMenu(record.id)" />
                  <ry-tooltip-button title="编辑" type="primary" icon="edit" @click="editMenu(record)" />
                  <ry-tooltip-button title="删除" type="danger" icon="delete" @click="deleteMenu(record.id)" />
                </template>
              </a-table>
            </div>
            <!-- table区域-end -->
            <Menu-modal ref="modalForm" @ModalOk="modalFormOk" :url="url" :menuTreeData="menuTreeData"></Menu-modal>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import { RyListMixin } from '@/ryweb'
import MenuModal from './modules/MenuModal'
export default {
  name: 'MenuManage',
  mixins: [RyListMixin],
  components: { MenuModal },
  data () {
    return {
      queryParam: {},
      // 表头
      menuTreeData: [],
      loading: true,
      columns: [
        {
          title: '菜单标题',
          align: 'left',
          dataIndex: 'meta.title',
          ellipsis: true,
          width: 240
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '图标',
          align: 'center',
          dataIndex: 'meta.icon',
          scopedSlots: { customRender: 'icon' }
        },
        {
          title: '权限标识',
          dataIndex: 'permission',
          align: 'center',
          scopedSlots: { customRender: 'permission' }
        },
        {
          title: '组件路径',
          key: 'components',
          align: 'center',
          width: 360,
          ellipsis: true,
          scopedSlots: { customRender: 'components' }
        },
        {
          title: '可见',
          dataIndex: 'hidden',
          align: 'center',
          scopedSlots: { customRender: 'hidden' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200,
          fixed: 'right'
        }
      ],
      url: {
        list: this.$api.permission.menu.menu,
        delete: this.$api.permission.menu.delete,
        deleteBatch: this.$api.permission.menu.delete,
        edit: this.$api.permission.menu.update,
        modalInfo: this.$api.permission.menu.byId,
        add: this.$api.permission.menu.insert
      }
    }
  },
  props: {},
  computed: {},
  watch: {
    dataSource: {
      handler (newVal, oldVal) {
        this.dataSource = newVal
        this.menuTreeData = []
        this.setData(this.dataSource, this.menuTreeData)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getType (record) { // 根据type获取菜单类型
      switch (record.type) {
        case '1':
          if (record.permission) {
            return '<span class="ant-tag ant-tag-red">标签页</span>'
          }
          return '<span class="ant-tag ant-tag-orange">目录</span>'
        case '2':
          return '<span class="ant-tag ant-tag-blue">菜单</span>'
        case '3':
          return '<span class="ant-tag ant-tag-green">按钮</span>'
      }
    },
    setData (datas, newData) { // 遍历树
      if (!newData.length === 0) {
        newData = []
      }
      for (let i in datas) {
        newData.push({ title: '', key: '', value: '', children: [] })
        newData[i]['title'] = datas[i].meta.title
        newData[i]['key'] = datas[i].id
        newData[i]['value'] = datas[i].id
        if (datas[i].children) {
          this.setData(datas[i].children, newData[i].children)
        }
      }
    },
    // 新增菜单
    addMenu (id) {
      this.$refs.modalForm.showModal()
      this.$refs.modalForm.addMenu(id)
    },
    // 编辑菜单
    editMenu (record) {
      this.$refs.modalForm.showModal()
      this.$refs.modalForm.editMenu(record)
    },
    // 删除菜单
    deleteMenu (id) {
      this.handleDelete(id)
    }
  },
  filters: {},
  created () {
  },
  mounted () {
  },
  updated () {
  },
  beforeDestroy () { }
}
</script>

<style lang="less">
.table-operator {
  display: flex;
  justify-content: left;
  align-content: center;
  .setting {
    margin-top: 5px;
    font-size: 16px;
    color: #00bbbb;
  }
}
</style>
